import { View, Text, Image, StyleSheet, TouchableOpacity, Alert } from 'react-native'
import React from 'react'
import { Tabs, useRouter } from 'expo-router'
import { zhSpacingColBase, zhSpacingRowBase, zhThemeColor, zhThemeColorInverse } from '../../global'
import AsyncStorage from '@react-native-async-storage/async-storage'

export default function() {
  // 创建路由对象
  const router = useRouter()

  return (
    // 标签页导航
    // 公共的内容
    <Tabs screenOptions={{
      headerStyle: {    // 导航栏样式
        backgroundColor: zhThemeColor
      },
      headerTintColor: zhThemeColorInverse,  // 导航栏文字颜色
      headerTitleAlign: 'center',  // 导航栏文字水平对齐方式
      headerTitleStyle: {    // 导航栏文字样式
        fontSize: 16
      },
      tabBarActiveTintColor: zhThemeColor,  // 页签条激活的样式
      // tabBarInactiveTintColor: ''   // 页签条未激活的样式
      tabBarStyle: {   // 页签条样式
        paddingTop: zhSpacingColBase,
        paddingBottom: zhSpacingColBase,
        height: 65
      },
      tabBarLabelStyle: {  // 页签条文字样式
        fontSize: 14
      }
    }}>
      {/* 每个页面独立的内容 */}
      <Tabs.Screen name='home' options={{
        title: '智慧社区',   // 导航的标题内容
        tabBarLabel: '首页',  // 页签条的文字内容
        tabBarIcon: ({focused}) => (  // 页签条图标
          <Image
            source={focused ? require('../../assets/img/home_active.png') : require('../../assets/img/home.png')}
            style={ss.tabBarIcon} 
          />
        ),
        headerRight: () => (
          // 按下后，控制里边内容的不透明度
          <TouchableOpacity 
            activeOpacity={0.6}
            onPress={() => Alert.alert(
              '提示',
              '您确认要退出吗？',
              [
                {
                  text: '确定',
                  onPress: async () => {
                    // 清空token
                    await AsyncStorage.removeItem('userToken')
                    // 跳转到登录页
                    router.replace('/')
                  }
                },
                {text: '取消'}
              ]
            )}
          >
            <Image 
              source={require('../../assets/img/user0.png')}
              style={{
                width: 30, 
                height: 30, 
                marginRight: zhSpacingRowBase
              }}
            />
          </TouchableOpacity>
        )

      }} />
      <Tabs.Screen name='property' options={{
        title: '物业管理',
        tabBarLabel: '物业',
        tabBarIcon: ({focused}) => (
          <Image source={focused ? require('../../assets/img/property_active.png') : require('../../assets/img/property.png')} style={ss.tabBarIcon} />
        )
      }} />
      <Tabs.Screen name='community' options={{
        title: '社区',
        tabBarLabel: '社区',
        tabBarIcon: ({focused}) => (
          <Image source={focused ? require('../../assets/img/community_active.png') : require('../../assets/img/community.png')} style={ss.tabBarIcon} />
        ) 
      }} />
      <Tabs.Screen name='my' options={{
        title: '我的', 
        tabBarLabel: '我的',
        tabBarIcon: ({focused}) => (
          <Image source={focused ? require('../../assets/img/my_active.png') : require('../../assets/img/my.png')} style={ss.tabBarIcon} />
        )
      }} />
    </Tabs>
  )
}
// 创建样式对象
const ss = StyleSheet.create({
  tabBarIcon: {
    width: 32,
    height: 32
  }
})
